<template name="ys-coupon">
	<view class="ys-coupon">
    <view class="coupon-list" v-for="(item, index) in list" :key="index">
      <view class="coupon-left">
      	<text>￥</text>
        <text class="money">{{item.money}}</text>
      </view>
      <view class="coupon-right">
      	<view class="title">{{item.title}}</view>
        <view class="type">新人卷</view>
        <view class="time">使用期限{{item.starTime}}-{{item.stopTime}}</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
      name: "ys-coupon",
       props: {
           list: {
               type: Array,
               default: () => []
           }
       },
      mounted() {
          
      },
      data() {
          return {
              
          };
      },
      methods: {
          
      }
  }  
</script>

<style lang="scss">
  .ys-coupon{
    width: 100%;
    height: 100%;
    .coupon-list{
      box-shadow: 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.14);
      height: 220upx;
      width: 90%;
      margin: 0 auto;
      margin-top: 30upx;
      position: relative;
      .coupon-left{
        width: 30%;
        height: 100%;
        background-position: left center;
        background-repeat: no-repeat;
        background-size: auto 95%;
        background-image: url('');
        background-color: #FFDE00;
        position: absolute;
        text-align: center;
        line-height: 110px;
        .money{
          font-size: 90rpx;
          color: #000;
        }
      }
      .coupon-right{
        width: 70%;
        height: 100%;
        position: absolute;
        left: 30%;
        background-color: #fff; 
        .title{
          font-size: 30rpx;
          color: #333;
          margin-top: 20upx;
          margin-left: 20upx;
        }
        .type{
          width: 100upx;
          height: 42upx;
          line-height: 42upx;
          font-size: 20upx;
          color: #FF530F;
          margin-top: 10upx;
          text-align: center;
          margin-left: 20upx;
          background-position: center;
          background-repeat: no-repeat;
          background-size: contain;
          background-image: url('');
        }
        .time{
          bottom: 16rpx;
          font-size: 22rpx;
          color: #999;
          margin-left: 20upx;
          margin-top: 30px;
        }
      }
    }
  }
</style>
